<template>
    <div>
        <el-form-item
            v-if="item.type === Constants.input"
            :label="item.label"
        >
            <el-input
                v-model="formData[item.name]"
                :placeholder="item.placeholder"
                :maxlength="item.maxlength"
                :minlength="item.minlength"
                :disabled="item.disabled"
                :readonly="item.readonly"
                :clearable="item.clearable"
                :validate-event="item.validateEvent"
            />
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.password"
            :label="item.label"
        >
            <el-input
                v-model="formData[item.name]"
                type="password"
                :placeholder="item.placeholder"
                :maxlength="item.maxlength"
                :minlength="item.minlength"
                :disabled="item.disabled"
                :readonly="item.readonly"
                :show-password="item.showPassword"
            />
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.select"
            :label="item.label"
        >
            <el-select
                v-model="formData[item.name]"
                :multiple="item.multiple"
                :disabled="item.disabled"
                :clearable="item.clearable"
                :placeholder="item.placeholder"
                :multiple-limit="item.multipleLimit"
                style="width: 100%"
            >
                <el-option
                    v-for="option in item.options"
                    :key="Constants.select + option.value"
                    :label="option.label"
                    :value="option.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.selectV2"
            :label="item.label"
        >
            <el-select-v2
                v-model="formData[item.name]"
                :options="item.options"
                :placeholder="item.placeholder"
                :multiple="item.multiple"
                :disabled="item.disabled"
                :clearable="item.clearable"
                :multiple-limit="item.multipleLimit"
                style="width: 100%"
            />
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.textarea"
            :label="item.label"
        >
            <el-input
                v-model="formData[item.name]"
                type="textarea"
                :rows="item.rows"
                :disabled="item.disabled"
                :readonly="item.readonly"
                :minlength="item.minlength"
                :maxlength="item.maxlength"
                :clearable="item.clearable"
                :placeholder="item.placeholder"
                :validate-event="item.validateEvent"
            />
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.checkbox"
            :label="item.label"
        >
            <el-checkbox-group
                v-model="formData[item.name]"
                :disabled="item.disabled"
                :min="item.minlength"
                :max="item.maxlength"
            >
                <el-checkbox
                    v-for="label in item.options"
                    :key="Constants.checkbox + label.value"
                    :label="label.value"
                    :border="item.border"
                >
                    {{ label.label }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.radio"
            :label="item.label"
        >
            <el-radio-group
                v-model="formData[item.name]"
                :disabled="item.disabled"
                :size="item.size"
            >
                <div v-if="item.radioType === 'default'">
                    <el-radio
                        v-for="(label, i) in item.options"
                        :key="item.name + i"
                        :label="label.value"
                        :border="item.border"
                        :disabled="item.disabled"
                    >
                        {{ label.label }}
                    </el-radio>
                </div>
                <div v-if="item.radioType === 'button'">
                    <el-radio-button
                        v-for="(label, i) in item.options"
                        :key="item.name + i"
                        :label="label.value"
                        :border="item.border"
                        :disabled="item.disabled"
                    >
                        {{ label.label }}
                    </el-radio-button>
                </div>
            </el-radio-group>
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.inputNumber"
            :label="item.label"
        >
            <el-input-number
                v-model="formData[item.name]"
                :step="item.step"
                :min="item.minlength"
                :max="item.maxlength"
                :border="item.border"
                :disabled="item.disabled"
                :controls="item.controls"
                :precision="item.precision"
            />
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.slider"
            :label="item.label"
        >
            <el-slider
                v-model="formData[item.name]"
                :step="item.step"
                :min="item.minlength"
                :max="item.maxlength"
                :disabled="item.disabled"
                :show-input="item.showInput"
                :show-tooltip="item.showToolTip"
                :show-input-controls="item.showInputControls"
            />
        </el-form-item>
        <el-form-item
            v-if="item.type === Constants.switch"
            :label="item.label"
        >
            <el-switch
                v-model="formData[item.name]"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :width="item.widthPx"
                :disabled="item.disabled"
                :active-value="item.activeValue"
                :inactive-value="item.inactiveValue"
            />
        </el-form-item>
        <el-form-item v-if="item.type === Constants.button">
            <el-button
                :plain="item.plain"
                :round="item.round"
                :type="item.buttonType === '' ? undefined : item.buttonType"
                :disabled="item.disabled"
            >
                {{ item.label }}
            </el-button>
        </el-form-item>
    </div>
</template>

<script>
import Constants from "../../utils/Constants";
export default {
    name: "FormItem",
    props: {
        item: {
            type: Object,
            default: () => {}
        },
        baseFormData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            Constants,
            formData: this.baseFormData
        }
    },
    watch: {
        'item.multiple': {
            handler() {
                if (typeof this.item.multiple !== 'undefined') {
                    if (this.item.multiple) {
                        this.formData[this.item.name] = [this.formData[this.item.name]]
                    } else {
                        this.formData[this.item.name] = this.item.options[0].value
                    }
                }
            }
        },
        'item.name': {
            handler(val, oldValue) {
                let data = {
                    newName: val,
                    id: this.item.id,
                    oldName: oldValue
                };
                this.$emit('nameChange', data);
            }
        }
    }
}
</script>

<style scoped>
    .el-input-number {
        width: 180px;
    }
</style>
